<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="el-icon-s-promotion"></i> 后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
      <el-breadcrumb-item>检查提交</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>
    <el-steps :active="active" align-center >
      <el-step title="添加类别" description="选择商品类别" icon="el-icon-circle-plus" ></el-step>
      <el-step title="填写其他信息" description="填写其他商品信息"  icon="el-icon-edit"></el-step>
      <el-step title="添加图片" description="添加商品图片" icon="el-icon-picture"></el-step>
      <el-step title="提交" description="检查提交"  icon="el-icon-upload" ></el-step>
    </el-steps>
    <el-divider></el-divider>

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="基本信息">
        <el-descriptions title="  ">
          <el-descriptions-item label="书名" span="1">
            <el-tag size="small">{{this.ruleForm.name}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="作者" span="1">
            <el-tag size="small">{{this.ruleForm.author}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="商品类别">{{this.ruleForm.categoryName}}</el-descriptions-item>
          <el-descriptions-item label="包装类型" >{{this.ruleForm.packName}}</el-descriptions-item>
          <el-descriptions-item label="出版社"> {{this.ruleForm.pressName}}</el-descriptions-item>
          <el-descriptions-item label="单价">{{this.ruleForm.money}}</el-descriptions-item>
          <el-descriptions-item label="库存">{{this.ruleForm.num}}</el-descriptions-item>
          <el-descriptions-item label="排序序号">{{this.ruleForm.sort}}</el-descriptions-item>
          <el-descriptions-item label="描述">{{this.ruleForm.describe}}</el-descriptions-item>
          <el-descriptions-item label="出版时间">{{this.ruleForm.houseTime}}</el-descriptions-item>
          <el-descriptions-item label="是否上架">{{this.ruleForm.state}}</el-descriptions-item>
        </el-descriptions>
      </el-form-item>
      <el-form-item label="商品图片">
        <div class="demo-image__preview" v-for="url in urlArr">
          <el-image
              style="width: 100px; height: 100px"
              :src="'http://localhost:8080'+url"
              :preview-src-list="urlArrsss">
          </el-image>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="backToPreStep()">上一步</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      </el-form-item>
    </el-form>


  </div>
</template>

<script>
export default {
  data() {
    return {
      editor: {},
      ruleForm: {
        categoryId:"",
        categoryName:"",
        pressName:"55",
        packName:"hh",
        pressId:"",
        packId:"",
        name:'11111',
        money:100,
        state:1,
        houseTime:"2022年10月",
        describe:'哈利波特1',
        num:20,
        sort:1,
        author:'J.K.罗琳',
        url:''
      },
      active:4,
      rules: {

      },
      urlArr:[],
      urlArrsss:[]
    };
  },
  methods: {
    backToPreStep() {
      this.$router.push('goodsAddNew2');
    },
    loadLocalRuleForm() {
      let localRuleFormString = localStorage.getItem('ruleForm');
      if (localRuleFormString) {
        let localRuleForm = JSON.parse(localRuleFormString);
        this.ruleForm = localRuleForm;
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:8080/adminGoodsAddNew/add-new';
          console.log('url = ' + url);
          let urlArr = this.qs.stringify(this.urlArr);
          this.ruleForm.url=urlArr;
          let formData = this.qs.stringify(this.ruleForm);

          console.log('formData = ' + formData);
          console.log('urlArr = ' + urlArr);

          this.axios.post(url,formData).then((response) => {
              let responseBody = response.data;
              if (responseBody.state == 20000) {
                this.$alert('添加成功！', '操作成功', {
                  confirmButtonText: '确定',
                  callback: action => {
                    localStorage.removeItem('ruleForm');
                    localStorage.removeItem('urlArr');
                    this.$router.push('GoodsAddNew');
                  }
                });
              } else {
                this.$message.error(responseBody.message);
              }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    loadUrlArrs(){
      let localRuleFormString = localStorage.getItem('urlArr');
      if (localRuleFormString) {
        let localRuleForm = JSON.parse(localRuleFormString);
        this.urlArr = localRuleForm;
        console.log('url='+this.urlArr)
        this.loadUrlArrssss();
      }
      let localRuleFormString1 = localStorage.getItem('ruleForm');
      if (localRuleFormString1) {
        let localRuleForm = JSON.parse(localRuleFormString1);
        this.ruleForm = localRuleForm;
        console.log('ruleForm='+this.ruleForm)
      }
    },
    loadUrlArrssss(){
      for (let i=0;i<this.urlArr.length;i++){
        let path='http://localhost:8080'
        this.urlArrsss[i]=path+this.urlArr[i];
        console.log("图片",this.urlArrsss[i])
      }
    }
  },
  mounted() {
    this.loadLocalRuleForm();
    this.loadUrlArrs();

  }
}
</script>